<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Listen美食城 - 账号登录</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/assets/home/assets/css/register.css"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/home/vendors/mobiscroll-master/css/mobiscroll.frame.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/home/vendors/mobiscroll-master/css/mobiscroll.scroller.css">

    <link rel="stylesheet" href="__PUBLIC__/assets/home/vendors/datepicker-master/dist/datepicker.css">

</head>
<body class="zh_CN">
<div class="wrapper">
    <div class="wrap">
        <div class="layout">
            <div class="n-frame device-frame reg_frame" id="main_container">
                <div class="external_logo_area"><a class="milogo" href="javascript:void(0)"></a></div>
                <div class="title-item t_c">
                    <h4 class="title_big30">注册Listen美食城帐号</h4>
                </div>
                <form>
                    <div class="regbox">
                        <div class="phone_step1">
                            <h4 class="tit_normal">
                                用户昵称：
                            </h4>
                            <div class="listwraps select-regions">
                                <div class="inputbg">
                                    <label class="labelbox">
                                        <input type="text" id="nickname" name="nickname" data-type="PH"
                                               placeholder="请输入昵称">
                                    </label>
                                </div>
                            </div>

                            <h4 class="tit_normal">
                                上传头像：
                            </h4>
                            <div class="listwraps elect-regions">
                                <div class="inputbg">
                                    <button id="upload_one" style="margin-left: 80px;margin-top: -20px;"></button>
                                    <div id="view_one">
                                        <input type="hidden" id="thumb" name="thumb" value="">
                                        <img src="" class="am-img-responsive" style="margin-top: 8px;max-height: 60px">
                                    </div>
                                </div>
                            </div>

                            <h4 class="tit_normal">
                                手机号码：
                            </h4>
                            <div class="listwraps elect-regions">
                                <div class="inputbg">
                                    <label class="labelbox">
                                        <input type="text" id="mobile" name="mobile" placeholder="请输入手机号码">
                                    </label>
                                </div>
                            </div>

                            <h4 class="tit_normal">
                                性别：
                            </h4>
                            <div class="listwraps elect-regions">
                                <div class="inputbg">
                                    <label class="labelbox">
                                        <input type="text" id="sex" name="sex" placeholder="请输入性别: 1代表男；0代表女">
                                    </label>
                                </div>
                            </div>

                            <h4 class="tit_normal">
                                生日：
                            </h4>
                            <div class="listwraps elect-regions">
                                <div class="inputbg">
                                    <label class="labelbox">
                                        <input type="text" id="birthday" name="birthday" placeholder="生日格式yy-mm-dd"
                                               data-toggle="datepicker"/>
                                    </label>
                                </div>
                            </div>

                            <h4 class="tit_normal">
                                邮箱：
                            </h4>
                            <div class="listwraps elect-regions">
                                <div class="inputbg">
                                    <label class="labelbox">
                                        <input type="text" id="email" name="email" placeholder="请输入邮箱">
                                    </label>
                                </div>
                            </div>

                            <h4 class="tit_normal">
                                地区：
                            </h4>
                            <div class="listwraps elect-regions">
                                <div class="inputbg">
                                    <label class="labelbox">
                                        <input name="area" id="area" type="text" placeholder="请选择地区"/>
                                    </label>
                                </div>
                            </div>

                            <h4 class="tit_normal">
                                密码：
                            </h4>
                            <div class="listwraps elect-regions">
                                <div class="inputbg">
                                    <label class="labelbox">
                                        <input type="password" id="password" name="password" placeholder="请输入密码">
                                    </label>
                                </div>
                            </div>

                            <h4 class="tit_normal">
                                确认密码：
                            </h4>
                            <div class="listwraps elect-regions">
                                <div class="inputbg">
                                    <label class="labelbox">
                                        <input type="password" id="check_password" name="check_password"
                                               placeholder="请再次输入密码">
                                    </label>
                                </div>
                            </div>

                            <p class="fixed_bot mar_phone_dis1">
                                <input class="btn332 btn_reg_1 submit" data-to="phone-step2" type="submit" value="立即注册">
                                <br>
                            <p>
                                <a href="{{:U('Customer/login')}}">已有账号，请<span style="color:red;">直接登录</span></a>
                            </p>
                            <p class="msg">
                                注册帐号即表示您同意并愿意遵守listen美食城 <a href="javascript:;"
                                                            class="inspect_link agreement_link" title="用户协议"
                                                            target="_blank">用户协议</a>和<a
                                    href="javascript:;" class="inspect_link privacy_link" title=" 隐私政策 "
                                    target="_blank"> 隐私政策 </a>
                            </p>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="n-footer">
    <div class="nf-link-area clearfix">
        <ul class="lang-select-list">
            <li><a class="lang-select-li current" href="javascript:void(0)" data-lang="zh_CN">简体</a>|</li>
            <li><a class="lang-select-li" href="javascript:void(0)" data-lang="zh_TW">繁体</a>|</li>
            <li><a class="lang-select-li" href="javascript:void(0)" data-lang="en">English</a></li>
            |
            <li><a class="a_critical" href="https://static.account.xiaomi.com/html/faq/faqList.html"
                   target="_blank"><em></em>常见问题</a></li>
        </ul>
    </div>
    <p class="nf-intro">
        <span>
            <img src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png">
        </span>鄂公网安备1234567890011号-鄂ICP证666888号</span>
    </p>
</div>

<script src="__PUBLIC__/vendor/assets/js/jquery.min.js"></script>

<!--日期插件-->
<script src="__PUBLIC__/assets/home/vendors/datepicker-master/dist/datepicker.js"></script>
<script src="__PUBLIC__/assets/home/vendors/datepicker-master/i18n/datepicker.zh-CN.js"></script>
<!--上传图片-->
<script src="__PUBLIC__/vendor/bootstrapextend/js/bootstrap.extend.js"></script>
<!--省市区地址-->
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.core.js"></script>
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.frame.js"></script>
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.scroller.js"></script>
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.select.js"></script>
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/i18n/mobiscroll.i18n.zh.js"></script>
<script src="__PUBLIC__/assets/home/assets/js/areas.js"></script>

<script>
    $(function () {
        //上传单张
        $('#upload_one').Huploadify({
            uploader: '{{:U("Admin/Uploadfile/upload")}}',
            fileTypeExts: '*.gif;*.jpg;*.jpeg;*.png;*.bmp',
            //fileSizeLimit:{:C('UPLOAD_IMAGE_SIZE')}*1024,
            buttonText: '上 传 图 片',
            onUploadComplete: function (file, data) {
                data = $.parseJSON(data);
                $('#view_one img').attr("src", data.real_path);
                $('#view_one input').attr("value", data.real_path);
            }
        });

        //省市区插件
        $('#area').mobiscroll().scroller({
            theme: 'mobiscroll',
            lang: 'zh',
            display: 'top',
            fixedWidth: [100, 100, 100],
            onBeforeShow: function (inst) {
                var areaList = new Areas();
                inst.settings.wheels = [[areaList.getData(1), areaList.getData(inst._tempWheelArray[0]), areaList.getData(inst._tempWheelArray[1])]];
            },

            parseValue: function (val) {
                return [110000, 110100, 110101];
            },

            validate: function (html, index, time, dir, inst) {
                var areaList = new Areas();
                if (index == 0) {
                    inst.settings.wheels[0][1] = areaList.getData(inst._tempWheelArray[0]);
                    inst.changeWheel([1]);

                    inst.settings.wheels[0][2] = areaList.getData(inst._tempWheelArray[1]);
                    inst.changeWheel([2]);
                }
                if (index == 1) {
                    inst.settings.wheels[0][2] = areaList.getData(inst._tempWheelArray[1]);
                    inst.changeWheel([2]);
                }
            },

            formatValue: function (data) {
                var areaList = new Areas();
                return areaList.getNameById(data[0]) + ' ' + areaList.getNameById(data[1]) + ' ' + areaList.getNameById(data[2]);
            }
        });

        // 使用日期
        $('[data-toggle="datepicker"]').datepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd'
        });

        //ajax注册
        $(".submit").click(function () {
            var info = {
                nickname: $("#nickname").val(),
                mobile: $("#mobile").val(),
                sex: $("#sex").val(),
                thumb: $('#thumb').val(),
                birthday: $("#birthday").val(),
                email: $("#email").val(),
                area: $("#area").val(),
                password: $("#password").val(),
                check_password: $("#check_password").val()
            }
            //邮箱正则
            var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            //手机号正则
            var mobile = /^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,6,7,8]{1}\d{8}$|^18[\d]{9}$/;

            if (info.nickname.length < 5 || info.nickname.length > 20) {
                alert('用户名的长度必须在5-20位之间');
                return false;
            }
            if (!mobile.test(info.mobile)) {
                alert('手机号格式不正确');
                return false;
            }
            if (!email.test(info.email)) {
                alert('邮箱格式不正确');
                return false;
            }
            if (info.birthday.length == "") {
                alert('生日不能为空');
                return false;
            }
            if (info.sex.length == "") {
                alert('性别不能为空');
                return false;
            }
            if (info.password.length < 6) {
                alert('密码的长度不能小于6位');
                return false;
            }
            if (info.password != info.check_password) {
                alert('两次输入的密码不一致');
                return false;
            }

            $.post("{{:U('ajax_register')}}", info, function (info) {
                if (info.status == 1) {
                    alert(info.msg);
                    location.href = "{{:U('Customer/login')}}";
                } else {
                    alert(info.msg);
                }
            })
            return false;
        })
    })
</script>
</body>
</html>
